<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>促销信息列表 | SocialMart</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #2563eb;
            --primary-light: #eff6ff;
            --secondary: #ec4899;
            --success: #10b981;
            --warning: #f59e0b;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
            --light-gray: #e2e8f0;
        }
        
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #f1f5f9;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .main-container {
            padding: 2rem 0;
        }
        
        .page-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: var(--dark);
        }
        
        .filters-container {
            background-color: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-section:last-child {
            margin-bottom: 0;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-title i {
            color: var(--primary);
        }
        
        .category-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .category-tag {
            background-color: var(--light);
            border: 1px solid var(--light-gray);
            border-radius: 20px;
            padding: 0.5rem 1.25rem;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
            font-size: 0.9rem;
        }
        
        .category-tag:hover, .category-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .price-range {
            padding: 0 1rem;
        }
        
        .price-inputs {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        
        .price-input {
            flex: 1;
        }
        
        .price-input input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
        }
        
        .range-slider {
            width: 100%;
            margin-top: 1rem;
        }
        
        .form-check {
            margin-bottom: 0.75rem;
        }
        
        .form-check-input:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 0.75rem 1rem 0.75rem 2.5rem;
            border: 1px solid var(--light-gray);
            border-radius: 6px;
        }
        
        .search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray);
        }
        
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .btn-reset {
            background-color: white;
            border: 1px solid var(--light-gray);
            color: var(--gray);
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .btn-apply {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .sort-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .results-count {
            color: var(--gray);
        }
        
        .sort-options {
            display: flex;
            gap: 1rem;
        }
        
        .sort-option {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
        }
        
        .sort-option:hover, .sort-option.active {
            color: var(--primary);
            background-color: var(--primary-light);
        }
        
        .promo-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 1.5rem;
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
        }
        
        .promo-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .promo-image {
            flex: 0 0 150px;
        }
        
        .promo-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .no-image {
            flex: 0 0 150px;
            background-color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
        }
        
        .promo-content {
            flex: 1;
            padding: 1rem;
        }
        
        .promo-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        
        .promo-author {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .author-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .post-time {
            color: var(--gray);
            font-size: 0.8rem;
        }
        
        .promo-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }
        
        .promo-description {
            color: var(--gray);
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .promo-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .promo-price {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .original-price {
            color: var(--gray);
            text-decoration: line-through;
            font-size: 0.9rem;
        }
        
        .discount-price {
            color: var(--secondary);
            font-weight: 700;
            font-size: 1.1rem;
        }
        
        .discount-tag {
            background-color: var(--secondary);
            color: white;
            padding: 0.2rem 0.6rem;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .promo-actions {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.85rem;
            cursor: pointer;
        }
        
        .action-btn:hover {
            color: var(--primary);
        }
        
        .action-btn.liked {
            color: var(--secondary);
        }
        
        .pagination-container {
            margin-top: 2rem;
            display: flex;
            justify-content: center;
        }
        
        .pagination {
            display: flex;
            gap: 0.5rem;
        }
        
        .page-item {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .page-item:hover {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .page-item.active {
            background-color: var(--primary);
            color: white;
        }
        
        .view-options {
            display: flex;
            gap: 0.5rem;
        }
        
        .view-option {
            background: none;
            border: 1px solid var(--light-gray);
            width: 36px;
            height: 36px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--gray);
        }
        
        .view-option:hover, .view-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        @media (max-width: 992px) {
            .filter-sidebar {
                margin-bottom: 2rem;
            }
        }
        
        @media (max-width: 768px) {
            .promo-card {
                flex-direction: column;
            }
            
            .promo-image, .no-image {
                flex: none;
                height: 200px;
                width: 100%;
            }
            
            .sort-bar {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .category-tags {
                gap: 0.5rem;
            }
            
            .category-tag {
                padding: 0.4rem 1rem;
                font-size: 0.85rem;
            }
        }
        
        @media (max-width: 576px) {
            .price-inputs {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .filter-actions {
                flex-direction: column;
            }
            
            .btn-reset, .btn-apply {
                width: 100%;
            }
            
            .sort-options {
                flex-wrap: wrap;
            }
        }
        
        /* 网格视图样式 */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-view .promo-card {
            flex-direction: column;
        }
        
        .grid-view .promo-image, .grid-view .no-image {
            flex: none;
            height: 180px;
            width: 100%;
        }
        
        /* 大图视图样式 */
        .large-view .promo-card {
            display: grid;
            grid-template-columns: 1fr 2fr;
        }
        
        .large-view .promo-image {
            flex: none;
            height: 100%;
        }
        
        @media (max-width: 768px) {
            .large-view .promo-card {
                grid-template-columns: 1fr;
            }
            
            .large-view .promo-image {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg py-3">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-shopping-bag"></i>
                SocialMart
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse justify-content-center">
                <div class="search-bar mx-auto">
                    <div class="input-group">
                        <span class="input-group-text bg-transparent border-right-0">
                            <i class="fas fa-search text-gray-400"></i>
                        </span>
                        <input type="text" class="form-control border-left-0" placeholder="搜索促销信息、品牌或商品...">
                    </div>
                </div>
            </div>
            
            <div class="navbar-nav ms-auto align-items-center gap-3">
                <a href="#" class="nav-link"><i class="fas fa-home"></i></a>
                <a href="#" class="nav-link"><i class="fas fa-bell"></i></a>
                <a href="#" class="nav-link"><i class="fas fa-message"></i></a>
                <img src="https://picsum.photos/100/100?random=1" alt="用户头像" class="rounded-circle" style="width: 38px; height: 38px; object-fit: cover;">
            </div>
        </div>
    </nav>
    
    <div class="container main-container">
        <h1 class="page-title">促销信息列表</h1>
        
        <div class="row">
            <!-- 筛选侧边栏 -->
            <div class="col-lg-3 filter-sidebar">
                <div class="filters-container">
                    <!-- 分类筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-tags"></i> 促销分类
                        </h3>
                        <div class="category-tags">
                            <div class="category-tag active">全部</div>
                            <div class="category-tag">服装鞋帽</div>
                            <div class="category-tag">数码电子</div>
                            <div class="category-tag">美妆护肤</div>
                            <div class="category-tag">家居生活</div>
                            <div class="category-tag">食品饮料</div>
                            <div class="category-tag">户外运动</div>
                            <div class="category-tag">餐饮服务</div>
                            <div class="category-tag">旅游出行</div>
                        </div>
                    </div>
                    
                    <!-- 价格范围筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-money-bill"></i> 价格范围
                        </h3>
                        <div class="price-range">
                            <div class="price-inputs">
                                <div class="price-input">
                                    <input type="number" placeholder="最低价格" min="0">
                                </div>
                                <div class="price-input">
                                    <input type="number" placeholder="最高价格" min="0">
                                </div>
                            </div>
                            <input type="range" class="form-range range-slider" min="0" max="5000" value="2500" id="priceSlider">
                            <div class="d-flex justify-content-between text-sm text-gray">
                                <span>¥0</span>
                                <span>¥2500</span>
                                <span>¥5000+</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 折扣力度筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-percent"></i> 折扣力度
                        </h3>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="discount1">
                            <label class="form-check-label" for="discount1">
                                9折以上
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="discount2" checked>
                            <label class="form-check-label" for="discount2">
                                7-9折
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="discount3" checked>
                            <label class="form-check-label" for="discount3">
                                5-7折
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="discount4" checked>
                            <label class="form-check-label" for="discount4">
                                3-5折
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="discount5">
                            <label class="form-check-label" for="discount5">
                                3折以下
                            </label>
                        </div>
                    </div>
                    
                    <!-- 时间筛选 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-clock"></i> 发布时间
                        </h3>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="timeFilter" id="time1" checked>
                            <label class="form-check-label" for="time1">
                                全部时间
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="timeFilter" id="time2">
                            <label class="form-check-label" for="time2">
                                今天
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="timeFilter" id="time3">
                            <label class="form-check-label" for="time3">
                                近7天
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="timeFilter" id="time4">
                            <label class="form-check-label" for="time4">
                                近30天
                            </label>
                        </div>
                    </div>
                    
                    <!-- 额外筛选条件 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-filter"></i> 其他条件
                        </h3>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="condition1">
                            <label class="form-check-label" for="condition1">
                                有图片
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="condition2" checked>
                            <label class="form-check-label" for="condition2">
                                官方认证
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="condition3">
                            <label class="form-check-label" for="condition3">
                                限时活动
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="" id="condition4">
                            <label class="form-check-label" for="condition4">
                                可叠加优惠
                            </label>
                        </div>
                    </div>
                    
                    <!-- 关键词搜索 -->
                    <div class="filter-section">
                        <h3 class="filter-title">
                            <i class="fas fa-search"></i> 关键词搜索
                        </h3>
                        <div class="search-box">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" class="search-input" placeholder="搜索促销信息关键词...">
                        </div>
                    </div>
                    
                    <!-- 筛选按钮 -->
                    <div class="filter-actions">
                        <button class="btn-reset">重置筛选</button>
                        <button class="btn-apply">应用筛选</button>
                    </div>
                </div>
            </div>
            
            <!-- 促销列表主内容区 -->
            <div class="col-lg-9">
                <!-- 排序和视图选项 -->
                <div class="sort-bar">
                    <div class="results-count">找到 128 条促销信息</div>
                    <div class="d-flex gap-2">
                        <div class="sort-options">
                            <button class="sort-option active">
                                <i class="fas fa-fire"></i> 热门优先
                            </button>
                            <button class="sort-option">
                                <i class="fas fa-clock"></i> 最新发布
                            </button>
                            <button class="sort-option">
                                <i class="fas fa-percent"></i> 折扣最大
                            </button>
                            <button class="sort-option">
                                <i class="fas fa-arrow-down"></i> 价格从低到高
                            </button>
                            <button class="sort-option">
                                <i class="fas fa-arrow-up"></i> 价格从高到低
                            </button>
                        </div>
                        <div class="view-options">
                            <button class="view-option active" data-view="list">
                                <i class="fas fa-list"></i>
                            </button>
                            <button class="view-option" data-view="grid">
                                <i class="fas fa-th"></i>
                            </button>
                            <button class="view-option" data-view="large">
                                <i class="fas fa-image"></i>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 促销列表 -->
                <div class="promo-list">
                    <!-- 促销1 -->
                    <div class="promo-card">
                        <div class="promo-image">
                            <img src="https://picsum.photos/600/400?random=20" alt="夏季连衣裙促销图片">
                        </div>
                        <div class="promo-content">
                            <div class="promo-header">
                                <div class="promo-author">
                                    <img src="https://picsum.photos/100/100?random=10" alt="时尚精选官方账号头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">时尚精选</div>
                                        <div class="post-time">2小时前</div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="promo-title">夏季新品连衣裙限时7折优惠</h3>
                            <p class="promo-description">夏季新款连衣裙，采用透气面料，多种款式可选，限时3天7折优惠，先到先得！</p>
                            <div class="promo-footer">
                                <div class="promo-price">
                                    <span class="original-price">¥399</span>
                                    <span class="discount-price">¥279</span>
                                    <span class="discount-tag">30% OFF</span>
                                </div>
                                <div class="promo-actions">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i> 128
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-comment"></i> 36
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-eye"></i> 1.2k
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 促销2 -->
                    <div class="promo-card">
                        <div class="promo-image">
                            <img src="https://picsum.photos/600/400?random=21" alt="无线耳机促销图片">
                        </div>
                        <div class="promo-content">
                            <div class="promo-header">
                                <div class="promo-author">
                                    <img src="https://picsum.photos/100/100?random=11" alt="数码达人账号头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">数码达人</div>
                                        <div class="post-time">5小时前</div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="promo-title">新款无线耳机首发特惠</h3>
                            <p class="promo-description">全新降噪无线耳机，续航长达30小时，首发期间立减200元，赠收纳盒！</p>
                            <div class="promo-footer">
                                <div class="promo-price">
                                    <span class="original-price">¥899</span>
                                    <span class="discount-price">¥699</span>
                                    <span class="discount-tag">22% OFF</span>
                                </div>
                                <div class="promo-actions">
                                    <button class="action-btn like-btn liked">
                                        <i class="fas fa-heart"></i> 356
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-comment"></i> 89
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-eye"></i> 3.7k
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 促销3 -->
                    <div class="promo-card">
                        <div class="no-image">
                            <i class="fas fa-coffee fa-3x"></i>
                        </div>
                        <div class="promo-content">
                            <div class="promo-header">
                                <div class="promo-author">
                                    <img src="https://picsum.photos/100/100?random=12" alt="咖啡生活账号头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">咖啡生活</div>
                                        <div class="post-time">昨天</div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="promo-title">会员日全场咖啡买一送一</h3>
                            <p class="promo-description">每月15日会员日特别活动，全场手工咖啡买一送一，可与其他优惠叠加使用，欢迎到店品尝！</p>
                            <div class="promo-footer">
                                <div class="promo-price">
                                    <span class="discount-tag">买一送一</span>
                                </div>
                                <div class="promo-actions">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i> 203
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-comment"></i> 54
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-eye"></i> 2.5k
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 促销4 -->
                    <div class="promo-card">
                        <div class="promo-image">
                            <img src="https://picsum.photos/600/400?random=23" alt="夏季家电促销图片">
                        </div>
                        <div class="promo-content">
                            <div class="promo-header">
                                <div class="promo-author">
                                    <img src="https://picsum.photos/100/100?random=13" alt="家电超市官方账号头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">家电超市</div>
                                        <div class="post-time">3天前</div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="promo-title">夏季家电清凉特惠，满3000减500</h3>
                            <p class="promo-description">空调、冰箱、风扇等夏季家电全面促销，满3000减500，满5000减1000，更有精美赠品相送。</p>
                            <div class="promo-footer">
                                <div class="promo-price">
                                    <span class="discount-tag">满减活动</span>
                                </div>
                                <div class="promo-actions">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i> 512
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-comment"></i> 127
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-eye"></i> 8.3k
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 促销5 -->
                    <div class="promo-card">
                        <div class="promo-image">
                            <img src="https://picsum.photos/600/400?random=28" alt="美妆产品图片">
                        </div>
                        <div class="promo-content">
                            <div class="promo-header">
                                <div class="promo-author">
                                    <img src="https://picsum.photos/100/100?random=15" alt="美妆护肤账号头像" class="author-avatar">
                                    <div>
                                        <div class="author-name">美妆护肤</div>
                                        <div class="post-time">4小时前</div>
                                    </div>
                                </div>
                            </div>
                            <h3 class="promo-title">进口面膜买二送一，限时促销</h3>
                            <p class="promo-description">纯天然植物精华面膜，补水保湿效果显著，买二盒送一盒，多买多送！</p>
                            <div class="promo-footer">
                                <div class="promo-price">
                                    <span class="original-price">¥198</span>
                                    <span class="discount-price">¥132</span>
                                    <span class="discount-tag">33% OFF</span>
                                </div>
                                <div class="promo-actions">
                                    <button class="action-btn like-btn">
                                        <i class="far fa-heart"></i> 95
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-comment"></i> 23
                                    </button>
                                    <button class="action-btn">
                                        <i class="far fa-eye"></i> 867
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 分页 -->
                <div class="pagination-container">
                    <div class="pagination">
                        <div class="page-item">
                            <i class="fas fa-chevron-left"></i>
                        </div>
                        <div class="page-item active">1</div>
                        <div class="page-item">2</div>
                        <div class="page-item">3</div>
                        <div class="page-item">4</div>
                        <div class="page-item">5</div>
                        <div class="page-item">...</div>
                        <div class="page-item">13</div>
                        <div class="page-item">
                            <i class="fas fa-chevron-right"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 分类标签筛选
            const categoryTags = document.querySelectorAll('.category-tag');
            categoryTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    categoryTags.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 排序选项
            const sortOptions = document.querySelectorAll('.sort-option');
            sortOptions.forEach(option => {
                option.addEventListener('click', function() {
                    sortOptions.forEach(o => o.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 视图切换
            const viewOptions = document.querySelectorAll('.view-option');
            const promoList = document.querySelector('.promo-list');
            
            viewOptions.forEach(option => {
                option.addEventListener('click', function() {
                    viewOptions.forEach(o => o.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 移除所有视图类
                    promoList.classList.remove('list-view', 'grid-view', 'large-view');
                    
                    // 添加选中的视图类
                    const viewType = this.getAttribute('data-view');
                    promoList.classList.add(`${viewType}-view`);
                });
            });
            
            // 点赞功能
            const likeBtns = document.querySelectorAll('.like-btn');
            likeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.classList.toggle('liked');
                    const icon = this.querySelector('i');
                    
                    if (this.classList.contains('liked')) {
                        icon.classList.remove('far');
                        icon.classList.add('fas');
                    } else {
                        icon.classList.remove('fas');
                        icon.classList.add('far');
                    }
                });
            });
            
            // 价格滑块
            const priceSlider = document.getElementById('priceSlider');
            priceSlider.addEventListener('input', function() {
                // 这里可以添加价格滑块变化的逻辑
                console.log('价格滑块值:', this.value);
            });
            
            // 筛选按钮
            const applyFilterBtn = document.querySelector('.btn-apply');
            applyFilterBtn.addEventListener('click', function() {
                // 模拟应用筛选
                alert('已应用筛选条件');
            });
            
            // 重置筛选按钮
            const resetFilterBtn = document.querySelector('.btn-reset');
            resetFilterBtn.addEventListener('click', function() {
                // 重置分类标签
                categoryTags.forEach(t => t.classList.remove('active'));
                categoryTags[0].classList.add('active');
                
                // 重置价格滑块
                priceSlider.value = 2500;
                
                // 重置折扣复选框
                const discountCheckboxes = document.querySelectorAll('#discount1, #discount2, #discount3, #discount4, #discount5');
                discountCheckboxes.forEach((checkbox, index) => {
                    checkbox.checked = index > 0 && index < 4; // 选中7-9折、5-7折、3-5折
                });
                
                // 重置时间单选框
                document.getElementById('time1').checked = true;
                
                // 重置其他条件
                document.getElementById('condition1').checked = false;
                document.getElementById('condition2').checked = true;
                document.getElementById('condition3').checked = false;
                document.getElementById('condition4').checked = false;
                
                // 清空搜索框
                document.querySelector('.search-input').value = '';
                
                alert('已重置所有筛选条件');
            });
            
            // 分页功能
            const pageItems = document.querySelectorAll('.page-item:not(:first-child):not(:last-child)');
            pageItems.forEach(item => {
                item.addEventListener('click', function() {
                    pageItems.forEach(i => i.classList.remove('active'));
                    this.classList.add('active');
                });
            });
        });
    </script>
</body>
</html>
    
